<template>
  <div>
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="small"
        :class="
          this.$i18n.t('language') === 'English'
            ? 'en-search-form'
            : 'zh-search-form'
        "
      >
        <div class="input-row">
          <el-form-item
            prop="employeeName"
            :label="$t('platform.name') + ':'"
          >
            <el-input
              v-model="searchForm.employeeName"
              size="small"
              :placeholder="$t('platform.name')"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('platform.applicant') + ':'">
            <el-input
              v-model="searchForm.applyDeptName"
              size="small"
              :placeholder="$t('platform.applicant')"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('users.phoneNumber') + ':'">
            <el-input
              v-model="searchForm.phone"
              size="small"
              :placeholder="$t('users.phoneNumber')"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('distributionMsg.auditStatus') + ':'">
            <el-select
              clearable
              filterable
              v-model="searchForm.status"
              :placeholder="$t('distributionMsg.auditStatus')"
            >
              <el-option
                :value="0"
                :label="$t('shop.pendingReview')"
              ></el-option>
              <el-option
                :value="1"
                :label="$t('productComm.pass')"
              ></el-option>
              <el-option
                :value="2"
                :label="$t('shopProcess.reject')"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button
              type="primary"
              size="small"
              style="margin-right: 10px;"
              @click="searchChange(true)"
              :loading="loading"
            >
              {{ $t("product.search") }}
            </el-button>
            <el-button
              size="small"
              @click="resetForm('searchForm')"
              :loading="loading"
            >
              {{ $t("product.reset") }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-button
      size="small"
      type="primary"
      style="margin-bottom: 20px;"
      @click="openAllAudit"
    >批量审核</el-button>
    <el-table
      :data="dataList"
      tooltip-effect="dark"
      header-cell-class-name="table-header"
      row-class-name="table-row-low"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :selectable="disableSelection"
        type="selection"
      ></el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        align="center"
        width="80"
        :label="$t('brand.serialNumber')"
      ></el-table-column>
      <el-table-column
        prop="employeeName"
        align="center"
        :label="$t('platform.name')"
      ></el-table-column>
      <el-table-column
        prop="applyDeptName"
        align="center"
        :label="$t('platform.applicant')"
      ></el-table-column>
      <el-table-column
        prop="idCard"
        align="center"
        :label="$t('platform.certificateNumber')"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('platform.expirationDate')"
      >
        <template slot-scope="{row}">
          <div>
            {{ row.periodStartTime + '-' + row.periodEndTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        :label="$t('users.phoneNumber')"
      ></el-table-column>
      <el-table-column
        prop="createBy"
        align="center"
        label="user id"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        :label="$t('shop.applicationDate')"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('brand.status')"
      >
        <template slot-scope="{row}">

          <div>
            <span :style="{width: '10px',height: '10px',display: 'inline-block',background:row.status == 1  ? '#00bb15' : row.status == 2 ? 'red' : '',borderRadius: '999px'}"></span>
            {{ row.status == 0 ? '待审核' : row.status == 1 ? '审核通过' : $t('shopProcess.reject') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('crud.menu')"
      >
        <template slot-scope="{row}">
          <div>
            <el-button
              :disabled="row.status != 0"
              type="text"
              :loading="loading"
              @click="openAuditDialog(row)"
            >{{ '审核' }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5,10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>

    <el-dialog
      title="审核员工认证"
      :visible.sync="auditDialogVisible"
      :before-close="handleCloseAuditDialog"
      :close-on-click-modal="false"
    >

      <div class="infoBox">
        <div class="left">
          <div style="display: flex;align-items: center;">
            <el-image
              style="width: 180px;margin-bottom: 20px;"
              :src="this.resourcesUrl + (this.rowData ? this.rowData.frontCard :'')"
              :preview-src-list="[this.resourcesUrl + (this.rowData ? this.rowData.frontCard :'')]"
            >
            </el-image>
            <span style="margin-left: 20px;">正</span>
          </div>
          <div style="display: flex;align-items: center;">
            <el-image
              style="width: 180px;"
              :src="this.resourcesUrl + (this.rowData ? this.rowData.reverseCard :'')"
              :preview-src-list="[this.resourcesUrl + (this.rowData ? this.rowData.reverseCard :'')]"
            >
            </el-image>
            <span style="margin-left: 20px;">反</span>
          </div>
        </div>
        <div class="right">
          <el-form style="width: 300px;margin-left: 100px;">
            <el-form-item label="姓名：">
              {{ rowData ? rowData.employeeName :'' }}
            </el-form-item>
            <el-form-item label="申办单位：">
              {{ rowData ? rowData.applyDeptName :'' }}
            </el-form-item>
            <el-form-item label="有效日期：">
              {{ rowData ? rowData.periodStartTime + '-' + rowData.periodEndTime :'' }}
            </el-form-item>
            <el-form-item label="证件编号：">
              {{ rowData ? rowData.idCard :'' }}
            </el-form-item>
            <el-form-item label="手机号：">
              {{ rowData ? rowData.phone :'' }}
            </el-form-item>
          </el-form>
        </div>
      </div>

      <el-form style="margin-top: 40px;margin-left: 50px;">
        <el-form-item label="审核状态">
          <el-radio-group
            @change="auditStatusChange"
            v-model="auditStatus"
          >
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="auditStatus == 2"
          label="驳回项"
        >

          <el-checkbox-group
            @change="changeCauseRejection"
            v-model="causeRejection"
          >
            <el-checkbox label="证件编号"></el-checkbox>
            <el-checkbox label="有效期"></el-checkbox>
            <el-checkbox label="证件照"></el-checkbox>
            <el-checkbox label="其他"></el-checkbox>
            <el-input
              :disabled="!causeRejection.includes('其他')"
              style="width: 150px;margin-left: 20px;"
              size="small"
              maxlength="10"
              show-word-limit
              v-model="causeRejectionText"
            ></el-input>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="loading"
          @click="handleAuth"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="批量审核员工认证"
      :visible.sync="allAuditDialogVisible"
      :before-close="handleCloseAllAuditDialog"
      :close-on-click-modal="false"
    >
      <el-form style="margin-top: 40px;margin-left: 50px;">
        <el-form-item label="审核状态">
          <el-radio-group
            @change="allAuditStatusChange"
            v-model="auditAllStatus"
          >
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="auditAllStatus == 2"
          label="驳回项"
        >

          <el-checkbox-group
            @change="changeAllCauseRejection"
            v-model="causeAllRejection"
          >
            <el-checkbox label="证件编号"></el-checkbox>
            <el-checkbox label="有效期"></el-checkbox>
            <el-checkbox label="证件照"></el-checkbox>
            <el-checkbox label="其他"></el-checkbox>
            <el-input
              :disabled="!causeAllRejection.includes('其他')"
              style="width: 150px;margin-left: 20px;"
              size="small"
              maxlength="10"
              show-word-limit
              v-model="causeAllRejectionText"
            ></el-input>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleAllAuth"
          :loading="loading"
        >确 定</el-button>
      </span></el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      activeName: '1',
      searchForm: {
        name: '',
        applyDeptName: '',
        phone: '',
        status: ''
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      theData: null, // 保存上次点击查询的请求条件
      theParams: null, // 保存上次点击查询的请求条件
      dataList: [],
      auditDialogVisible: false,
      allAuditDialogVisible: false,
      rowData: null,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      auditStatus: 1,
      causeRejection: [],
      causeRejectionText: '',
      multipleSelection: [],
      auditAllStatus: 1,
      causeAllRejection: [],
      causeAllRejectionText: '',
    }
  },
  created() {
    this.getDataList()
  },
  mounted() { },
  methods: {
    indexMethod(index) {
      return (this.page.currentPage - 1) * this.page.pageSize + index + 1;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {
        name: '',
        applyDeptName: '',
        phone: '',
        status: ''
      }
      this.$forceUpdate();
    },

    // 条件查询 JSON.stringify(arr)
    searchChange(newData = false) {
      this.page.currentPage = 1;
      this.getDataList(this.page, newData);
    },

    getDataList(page, newData = false) {
      page = page || this.page;
      if (newData || !this.theData) {
        this.theData = {
          current: page.currentPage,
          size: page.pageSize,
        };
        this.theParams = JSON.parse(JSON.stringify(this.searchForm));
      } else {
        this.theData.current = page.currentPage;
        this.theData.size = page.pageSize;
      }
      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/page"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(this.theData, this.theParams, {
            type: 1
          })
        ),
      }).then(({ data }) => {
        this.loading = false
        console.log(data.records);
        this.dataList = data.records;
        this.page.total = data.total;
        this.page.currentPage = data.current;
      }).catch(() => {
        this.loading = false
      })
    },

    openAuditDialog(row) {
      console.log(row);
      this.auditDialogVisible = true
      this.rowData = row
    },

    changeCauseRejection(val) {
      console.log(val);
      if (!val.includes('其他')) {
        this.causeRejectionText = ''
      }
    },

    allAuditStatusChange(val) {
      this.causeAllRejection = []
      this.causeAllRejectionText = ''
    },

    changeAllCauseRejection(val) {
      console.log(val);
      if (!val.includes('其他')) {
        this.causeAllRejectionText = ''
      }
    },

    auditStatusChange(val) {
      this.causeRejection = []
      this.causeRejectionText = ''
    },

    handleCloseAuditDialog(done) {
      this.causeRejection = []
      this.causeRejectionText = ''
      this.auditStatus = 1
      this.rowData = null
      done()
    },

    handleAuth() {
      if (this.auditStatus == 2 && !this.causeRejection.length) {
        this.$message.warning('请选择驳回项')
        return
      }
      if (this.auditStatus == 2 && this.causeRejection.length && this.causeRejection.includes('其他') && this.causeRejectionText.trim() == '') {
        this.$message.warning('请添加其他原因')
        return
      }
      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/approve"),
        method: "post",
        data: [{
          ...this.rowData,
          rejectOther: this.causeRejectionText.trim(),
          rejectCause: this.causeRejection.join(','),
          status: this.auditStatus,
        }]
      }).then(({ data }) => {
        this.loading = false
        console.log(data)
        this.$message.success('提交成功')
        this.getDataList()
        this.auditDialogVisible = false
        this.causeRejection = []
        this.causeRejectionText = ''
        this.auditStatus = 1
        this.rowData = null
      }).catch(() => {
        this.loading = false
      })
    },
    openAllAudit() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请勾选需要审核的项')
        return
      }
      this.allAuditDialogVisible = true
    },
    handleCloseAllAuditDialog(done) {
      this.causeAllRejection = []
      this.causeAllRejectionText = ''
      this.auditAllStatus = 1
      done()
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val
    },
    disableSelection(row) {
      if (row.status == 0) {
        return true
      } else {
        return false
      }
    },
    handleAllAuth() {
      if (this.auditAllStatus == 2 && !this.causeAllRejection.length) {
        this.$message.warning('请选择驳回项')
        return
      }
      if (this.auditAllStatus == 2 && this.causeAllRejection.length && this.causeAllRejection.includes('其他') && this.causeAllRejectionText.trim() == '') {
        this.$message.warning('请添加其他原因')
        return
      }
      let arr = []
      this.multipleSelection.forEach(item => {
        let obj = {}
        obj = {
          ...item,
          rejectOther: this.causeAllRejectionText.trim(),
          rejectCause: this.causeAllRejection.join(','),
          status: this.auditAllStatus,
        }
        arr.push(obj)
      })
      console.log(arr);
      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/approve"),
        method: "post",
        data: arr
      }).then(({ data }) => {
        console.log(data)
        this.loading = false
        this.$message.success('提交成功')
        this.getDataList()
        this.allAuditDialogVisible = false
        this.causeAllRejection = []
        this.causeAllRejectionText = ''
        this.auditAllStatus = 1
        this.multipleSelection = []
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-con {
  position: relative;
}

.empty-text {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: #909399;
}
::v-deep .export-load {
  top: -50% !important;
}
.infoBox {
  display: flex;
  align-items: center;
  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 50px;
  }
}
</style>

<style scoped>
>>> .el-table__fixed-right::before {
  z-index: 0;
}
</style>